<template>
    <div>
        <a-modal
            :title="!form.isSj?'设置备注':'设置签到时间'"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
        >
            <div class="howeverReason-form-item">
                <a-form-model
                    :id="randomId1"
                    class="form-model-big-box form-model-big-box1"
                    ref="ruleForm1"
                    :model="form"
                    :rules="rules"
                    layout="inline"
                >
                    <a-form-model-item ref="fbz" label="备注" prop="fbz"  class="form-item-flex-1" v-if="!form.isSj">
                        <a-textarea 
                            v-model="form.fbz"
                            :autosize="{ minRows: 3, maxRows: 10000 }"
                            placeholder="请输入备注"
                        ></a-textarea>
                    </a-form-model-item>
                    <a-form-model-item ref="fqdsj" label="签到时间" prop="fqdsj"  class="form-item-flex-1" v-else>
                        <a-date-picker show-time placeholder="请选择签到时间" v-model="form.fqdsj" />
                    </a-form-model-item>
                </a-form-model>
            </div>
        </a-modal>
    </div>
</template>
<script>
import moment from 'moment'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            moment:moment,
            visible:false,
            form:{},
            rules:{
                fbz:[{ required: true, message: '请输入原因', trigger: 'blur' }],
                fqdsj:[{type:'object', required: true, message: '请选择签到时间', trigger: 'blur' }],
            },
            randomId1:'formModel1'+new Date().getTime(),
        }
    },
    watch:{

    },
    mounted(){
        this.$nextTick(()=>{//表格所有标题样式
            this.getFormLabelStyle(this.randomId1)
        })
    },
    methods:{
        getFormLabelStyle(id,val){
            var parentElement = document.getElementById(id)//要不一样的id，避免不同组件加载到一样的
            var elements = parentElement.getElementsByClassName("ant-form-item");
            for (var i = 0; i < elements.length; i++) {
                let element = elements[i]
                if(element){
                    let itemLabel = elements[i].getElementsByClassName('ant-form-item-label')
                    if(itemLabel.length && itemLabel[0].getElementsByTagName('label').length){
                        //console.log(itemLabel[0].getElementsByTagName('label'))
                            itemLabel[0].getElementsByTagName('label')[0].style = 
                            'width:85px;display: flex;align-items: center;justify-content: flex-end;font-weight: 600;font-family:simHei;'
                    }
                }
            }
        },
        getData(row){
            row.fqdsj = row.fqdsj?moment(row.fqdsj):''
            this.form = row
        },
        handleOk(){
            
            this.$refs.ruleForm1.validate(valid => {
                if (valid) {
                    this.$emit('editBZ',{...this.form,fqdsj:moment(this.form.fqdsj).format('YYYY-MM-DD HH:mm:ss')})
                
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>
<style lang="less">
    .howeverReason-form-item{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            // display: flex;
            // align-items: center;
        }
        .toolbox-form-item{
            width: 50%;
            // padding: 3px;
        }
        .ant-form-item-with-help{
            margin-bottom: 10px;
        }
        .form-model-big-box{
            width: 100%;
            .form-item-flex-1{
                display: flex;
                .ant-form-item-control-wrapper{
                    flex: 1;
                    
                }
            }
            .ant-form-item-control-wrapper{
                font-family:仿宋_GB2312 !important;
                
                .ant-checkbox-group{
                    height: 40px;
                    line-height: 40px;
                }
            }
        }
        .form-model-big-box1{
            .ant-form-item-label{
                height: 32px;
                line-height: 32px;
                margin: 4px 3px;
                background: #f0f5ff;
                label{
                    padding-left: 3px;
                    
                }
                
            }
        }
        .ant-form-inline .ant-form-item > .ant-form-item-label{
            vertical-align: middle !important;
        }
    }
</style>